import {Steps, TabItem, Tabs} from "@astrojs/starlight/components";

import ZulipTip from "../../components/ZulipTip.astro";

import SendIcon from "~icons/zulip-icon/send";

<Tabs>
  <TabItem label="Desktop/Web">
    <Steps>
      1. Click the **Message...** button at the bottom of the app.
      1. Compose your message. You
         can [preview your message](/help/preview-your-message-before-sending) before
         sending.
      1. Click the **Send** (<SendIcon />) button, or
         use a [keyboard shortcut](/help/configure-send-message-keys) to send your
         message.
    </Steps>

    <ZulipTip>
      You can also reply by clicking on a message, or using the <kbd>R</kbd> or
      <kbd>Enter</kbd> keyboard shortcuts to reply to the message in the blue box.
    </ZulipTip>
  </TabItem>

  <TabItem label="Mobile">
    <Steps>
      1. Tap the **Message ...** text in the compose box at the bottom of the app.
      1. Compose your message, and tap the **Send**
         (<SendIcon />) button in the
         bottom right corner of the app.
    </Steps>

    <ZulipTip>
      If you're reading messages in a [channel feed](/help/channel-feed),
      or the [combined feed](/help/combined-feed), navigate to the conversation
      view by tapping the message recipient bar of the conversation you want to
      reply to.
    </ZulipTip>
  </TabItem>
</Tabs>
